<template>
  <div>
    <h1 class="title">新闻动态</h1>
    <div class="body">
      <div class="body_title">
        <span>新闻列表</span>
        <span class="addNews">
          <label class="add_name">添加</label>
          <i class="my_icon el-icon-plus" @click="addNews"></i>
        </span>
      </div>
      <div class="main">
        <div class="item" v-for="item in news">
          <div class="info">
            <img :src="item.coverImage">
            <div class="presentation">
              <div class="title">{{item.title}}</div>
              <div class="abstract">{{item.summary}}</div>
            </div>
          </div>
          <div class="edit">
            <div>{{item.date}}</div>
            <div class="edit_button">
              <span @click="editNews(item.id)">编辑</span> |
              <span @click="previewNews(item.id)">预览</span> |
              <span @click="deleteNews(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" @current-change="currentChange" prev-text="上一页"
                       next-text="下一页" :total=total>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'news',
    data() {
      return {
        news: [],
        total: 0,
        page: {
          pageIndex: 1,
          pageSize: 10
        }
      }
    },
    created() {
      this.initNews()
    },
    methods: {
      addNews() {
        this.$router.push({path: 'addNews/-1'})
      },
      editNews(_id) {
        this.$router.push({path: `addNews/${_id}`})
      },
      previewNews(_id) {
        this.$router.push({path: `preview/${_id}`})
      },
      initNews() {
        this.$post('/content/admin/news/list', this.page, res => {
          this.news = res.list
          this.total = res.total
          if (res.list.length == 0) {
            this.$message({message: '没有查询到数据', type: 'success'})
          }
        })
      },
      deleteNews(_id) {
        this.$confirm('确定删除该新闻吗?', '删除新闻', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$post('/content/admin/news/delete', {id: _id}, res => {
            this.$message({message: '操作成功', type: 'success'})
            this.initNews()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      // 分页按钮
      currentChange(e) {
        this.page.pageIndex = e
        this.initNews()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
  }

  .body {
    border: 1px solid #EBEEF5;
  }

  .body .body_title {
    background-color: #EEEEEE;
    padding: 5px 10px;
  }

  .body .body_title .addNews {
    float: right;
    font-size: 12px;
  }

  .my_icon {
    font-size: 18px;
    background-color: #409EFF;
    color: white;
    cursor: pointer;
    margin-left: 10px;
  }

  .addNews .add_name {
    position: relative;
    top: -2px;
  }

  .body .main {
    padding: 10px;
  }

  .body .main .item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px 0px;
    height: 80px;
  }

  .item .edit {
    float: right;
    height: 100%;
    font-size: 12px;
    text-align: right;
  }

  .item .edit .edit_button {
    position: relative;
    bottom: -45px;
  }

  .item .edit .edit_button span {
    cursor: pointer;
  }

  .item .edit .edit_button span:hover {
    color: red;
  }

  .item .info img {
    float: left;
    width: 120px;
    height: 80px;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
    margin-right: 10px;
  }

  .item .info {
    width: calc(100% - 160px);
    height: 80px;
    display: inline-block;
    overflow: hidden;
    position: relative;
  }

  .info .presentation {
    float: left;
    height: 80px;
    width: calc(100% - 140px);
  }

  .info .presentation .title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
  }

  .info .presentation .abstract {
    position: relative;
    bottom: -15px;
    font-size: 12px;
    overflow: hidden;
  }

  .pagination {
    margin-top: 30px;
    text-align: center;
  }
</style>
